<template>
	<view class="mask-coupon" >
	    <view class="wx-coupon" >
			<view style="height: 1px; width:100vw;background-color: #e1e1e1;"></view>
			<view v-show="item.name" class="cupon_item" v-for="(item,index) in cuponList" :key="index">
				<view class="content">
					<view style="margin-top: 15rpx; margin-right:15rpx">
						<text class="name">{{item.name}}</text>
					</view>
					<view style="margin-top: 15rpx;">
						<text class="description">{{item.description}}</text>
					</view>
					<view style="margin-top: 15rpx;">
						<text class="publishTime">{{item.publishTime}}</text>
					</view>	
				</view>
				<image class="cupon_bg" src="http://113.142.144.25:9301/statics/appimg/icon_cupon_bg_new.png" mode="" @click="getUser(item.id)">
				</image>
			</view>
	    </view>
	</view>
</template>

<script>
	import * as cupon from '@/api/cupon'
	export default {
		components: {
			"send-coupon": "plugin://sendCoupon/send-coupon"
		},
		data() {
			return {
				cuponList:[],
				showDialog:'false',
				userInfo:{},
				memberId:'',
			}
		},
		onLoad() {
			
			this.getCuponList();
		},
		methods:{
			getUser(id){
				var mystorage = uni.getStorageSync("userInfo") || []
				if(mystorage.login_user == null){
					uni.showToast({
						title:'请先登录！'
					})
					uni.navigateTo({
						url:'/subpages/pages/register/login_province'
					})
					uni.hideLoading()
					return
				}else{
					this.memberId = mystorage.login_user.member.id
					this.getCupon(id)
				}
			},
			getCuponList(){
				cupon.getCuponList().then((res)=>{
					this.cuponList = res.rows
				});
			},
			getCupon(id){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '确认领取这张券吗?',
				    success: function (res) {
				        if (res.confirm) {
							//领取创新券接口调用，领取后在个人中心可查看已领取的创新券
							const data = {
								id:id,
								memberId:that.memberId
							}
							cupon.revieveCupon(data).then((res)=>{
								uni.showToast({
									icon:'none',
									title:'领取成功！'
								})
							})
				        } else if (res.cancel) {
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.mask-coupon{
		height: fit-content;
		width: 100vw;
		background-color: #e1e1e1;
	}
	
	.wx-coupon{
		height: 100vh;
		background-color: #e1e1e1;
	}
	
	.cupon_item {
		height: 180rpx;
		background-color: #fff;
		margin:35rpx 35rpx;
		border-radius: 15rpx;
	}
	
	.cupon_bg{
		display: block;
		width: 200rpx;
		height:100rpx;
		margin-top: 40rpx;
		float: right;
		margin-right: 25rpx;
	}
	
	
	.content {
		width: 60%; 
		height: 180rpx;
		float: left;
		padding-left: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	
	.name {
		font-size:32rpx
	}
	
	.description{
		font-size: 25rpx;
		color: #fd0606;
	}
	
	.publishTime {
		font-size: 25rpx;
		color: dimgray;
	}
</style>